<template>
  <div class="app-container">
    <el-form ref="form" label-width="100px" :model="form" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="form.sex">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="身高" prop="height">
        <el-input v-model="form.height" />
      </el-form-item>
      <el-form-item label="体重" prop="weight">
        <el-input v-model="form.weight" />
      </el-form-item>
      <el-form-item v-show="form.sex === '男' ? false : true" label="邮箱" prop="email">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item v-show="form.sex === '男' ? false : true" label="地址" prop="address">
        <el-input v-model="form.address" />
      </el-form-item>
      <el-form-item v-show="form.sex === '男' ? false : true" label="联系电话" prop="phone">
        <el-input v-model="form.phone" />
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submit('form')">提交</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表单
      form: {
        name: '',
        age: '',
        height: '',
        sex: '男',
        weight: '',
        email: '',
        address: '',
        phone: ''
      },

      // 校验规则
      rules: {
        sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
        height: [{ required: true, message: '身高不能为空', trigger: 'blur' }],
        age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        weight: [{ required: true, message: '体重不能为空', trigger: 'blur' }],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
        address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
        phone: [{ required: true, message: '联系方式不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submit(formName) {
      // 当性别为男时需要验证的参数
      var fieldsToValidate = ['sex', 'height', 'age', 'name', 'weight']

      // 当性别为女时增加验证的参数
      if (this.form['sex'] === '女') {
        fieldsToValidate.push('email')
        fieldsToValidate.push('address')
        fieldsToValidate.push('phone')
      }

      // 验证方法：表单验证Promise
      this.checkForm(formName, fieldsToValidate).then(valid => {
        if (valid) {
          // true || false
          console.log('验证通过')
          // 验证通过后做点什么
        }
      })
    },
    checkForm(formName, fieldsToValidate) {
      // 验证方法：表单验证Promise
      return Promise.all(
        fieldsToValidate.map(field => {
          return new Promise(resolve => {
            this.$refs[formName].validateField(field, errorMessage => {
              resolve(errorMessage)
            })
          })
        })
      ).then(errorMessages => {
        // errorMessages⾥是各个字段的验证错误信息,如果数组⾥全为空串则所有验证通过。
        // 判断errorMessages⾥是否全是空串
        const valid = errorMessages.every(errorMessage => {
          return errorMessage === ''
        })
        return valid
      })
    }
  }
}
</script>
